<template>
  <div class="">
   <Row>
        <Col span="12" class="title clearfix">IVF顾问跟踪报告</Col>
   </Row>
	<div class="line"></div>
	<div class="MainBox">

		<Table :columns="tableHeader" :data="IVFFollowing.tableBody" style="margin-bottom:20px"></Table>

		<Form :model="IVFFollowing" :label-width="60" :rules="ruleValidate" ref="IVFFollwingValidate">

        <Form-item label="沟通时间">
           <Row>
	        <Col span="18">
	            <Date-picker type="date" placeholder="选择日期" v-model="IVFFollowing.date"></Date-picker>
	        </Col>

           </Row>



        </Form-item>
         <Form-item label="本次沟通内容" prop="content">
        	 <Input v-model="IVFFollowing.content" type="textarea" :autosize="{minRows: 3,maxRows: 8}" placeholder="请输入本次沟通内容"></Input>
	        </Form-item>
         <Form-item label="下次沟通计划" prop="project">
        	<Input v-model="IVFFollowing.project" type="textarea" :autosize="{minRows: 3,maxRows: 8}" placeholder="请输入下次沟通计划"></Input>
        </Form-item>

        <submit-button @submit="submit" @cancel="cancel"></submit-button>
    </Form>
	</div>



  </div>
</template>
<script >

import SubmitButton  from "../components/SubmitButton"
import Store from '../store'
import api from '../js/axios-module'
Store.save([],Store.IVFFOLLOWING_KEY)

export default {

  data () {
    return {
    	IVFFollowing:{
    		date:new Date(),
        dateStr:'',
    		content:'',
    		project:'',
        tableBody: Store.fetch(Store.IVFFOLLOWING_KEY)

    	},
      tableHeader: [
                    {
                        title: '沟通时间',
                        key: 'date'
                    },
                    {
                        title: '沟通内容',
                        key: 'content'
                    },
                    {
                        title: '沟通计划',
                        key: 'project'
                    }
                ],
      ruleValidate:{
        content: [
                   { required: true, message: '请输入本次沟通内容', trigger: 'blur' },

               ],
         project: [
             { required: true, message: '请输入下次沟通计划', trigger: 'blur' },

         ]
      }


    }
  },
  created: function () {
    // this.IVFFollowing.tableBody = Store.fetch(Store.IVFFOLLOWING_KEY)
  },components:{SubmitButton},
  methods:{

    submit:function(){

         this.$refs['IVFFollwingValidate'].validate((valid) => {
                    if (valid) {
                        this.$Message.success('提交成功!');
                        var item = new Object();
                        
                        item.date=  this.IVFFollowing.date.format("yyyy-MM-dd");
                        item.content = this.IVFFollowing.content
                        item.plan = this.IVFFollowing.project


                        console.log(item)
                        

                        api.setIVF({data:item}).then(response=>{

                          if (response.data.code == 200) {
                              this.IVFFollowing.tableBody.push({
                                date:item.date,
                                content:item.content,
                                project:item.plan
                            })
                            this.IVFFollowing.date = "";
                            this.IVFFollowing.content = "";
                            this.IVFFollowing.project = "";

                          }

                        },err=>{



                        })


                        
                        
                        // Store.save(this.IVFFollowing.tableBody,Store.IVFFOLLOWING_KEY)


                    }else{
                        this.$Message.error('表单验证失败!');
                    }
                })

    },
    cancel:function(){
      console.log("cancel")
    }
  },watch:{
    IVFFollowing:{
      handler:function(IVFFollowing){

      },
      deep:true
    }
  },
  mounted: function () {
      api.getIVF().then(response=>{
          // console.log(response.data.data)

        for (var i = response.data.data.length - 1; i >= 0; i--) {

          var model = new Object()
          model.date = response.data.data[i].date;
          model.content = response.data.data[i].content;
          model.project = response.data.data[i].plan
          this.IVFFollowing.tableBody.push(model)


        }


      },err=>{
        this.$Message.error('获取数据失败,请刷新再试');
      })
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>   /*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */

</style>
